<template>
	<view style="display: flex;margin:0 auto;flex-direction: column; width: 749rpx;">
		<!-- 固定图标的添加按键 -->
		<view @click="xianshi()" v-if="addBi"
			style="position:fixed;top: 500rpx;z-index: 100; right: 30rpx;border-radius: 50%;background-color:blue;display: flex;justify-content: center;align-items: center;width: 100rpx;height: 100rpx;">
			<image style="width: 80rpx;height: 80rpx;" src="../../static/10.png" mode=""></image>
		</view>

		<!-- 搜索框 -->
		<!-- <view
			style="display:flex;width: 700rpx ;background-color:white;align-items: center;justify-content: center;margin: 10rpx auto;border-radius:40rpx;">
			<u-search bgColor="white" margin="0 30rpx 0 0" :placeholder="shu2" actionText="搜索" v-model="soukey"
				@search="xiaoqufun" @custom="xiaoqufun"></u-search>
		</view> -->

		<!-- 横线隔开 -->
		<view style="display: flex;width: 90%;background-color: #DFDFDF;height: 3rpx;margin: 20rpx auto 10rpx auto;">
		</view>



		<!-- 校区的展示 -->
		<view
			style="display: flex;width:90%;margin: 0 auto;justify-content: space-around;flex-wrap: wrap;flex-direction: column;">
			<view v-for="(item,index) in xiaoqu" :key=index
				style="display: flex;width: 100%;align-items: center;margin-bottom: 20rpx;justify-content: center;background-color: white;border-radius: 20rpx;">
				<view v-if="item.name!=='全部'"
					style="display: flex;width: 85%;justify-content: space-between;align-items: center; flex-direction: row;margin: 15rpx 20rpx;">
					<view class="">
						{{item.name}}
					</view>
					<view style="display: flex;flex-direction: column;">
						<view @click="xiugaixiaoqu_show(item1)" v-for="(item1,index1) in xiaoqu1" :key="index1"
							style="display: flex;flex-direction: column; color: #DFDFDF;font-size: 28rpx;">
							<view v-if="item.name==item1.name" style="display: flex;justify-content: end;">
								管理老师：{{item1.guanlilaoshi}}
							</view>
							<view v-if="item.name==item1.name"
								style="display: flex;justify-content: end;flex-direction: column;">
								电话：{{item1.guanlilaoshidianhua.substring(0,3)}}****{{item1.guanlilaoshidianhua.substring(item1.guanlilaoshidianhua.length-4,item1.guanlilaoshidianhua.length)}}
								<view v-if="xiaoqu.length!==index1+1"
									style="width: 100%;height:2rpx;border-radius: 5rpx;background-color: #DFDFDF;margin-top: 10rpx;">

								</view>
							</view>

						</view>
					</view>

				</view>

			</view>
		</view>





		<!-- 下面是填加校区出现的弹窗 -->
		<model v-if='show' @colseModel='show = false'>
			<view
				style="display: flex;width: 100%;color:blue;font-size: 40rpx;justify-content: center;margin-bottom: 30rpx;">
				添加校区
			</view>
			<view style="display: flex;margin-bottom: 30rpx;">输入校区名字</view>
			<uni-easyinput type="text" v-model="shu8" />
			<view style="display: flex;margin-bottom: 30rpx;">选择管理老师名字</view>
			<picker @change="jiaowulaoshixuanze" :range="jiaowulaoshi">
				<uni-easyinput type="text" v-model="shu4" disabled placeholder="请选择教务老师" suffixIcon="bottom" />
			</picker>
			<!-- <uni-easyinput type="text" v-model="shu4" /> -->
			<view style="display: flex;margin-bottom: 30rpx;">选择老师电话</view>
			<uni-easyinput type="text" v-model="shu5" disabled />
			<view style="display: flex;width: 90%;justify-content: space-around;margin: 30rpx auto;color:white;">
				<view style="display: flex;background-color: blue;border-radius: 15rpx;padding: 20rpx 60rpx;"
					@click="show = false">取消</view>
				<view style="display: flex;background-color: blue;border-radius: 15rpx;padding: 20rpx 60rpx;"
					@click="addxiaoqu">确定</view>
			</view>
		</model>

		<!-- 下面是编辑校区出现的弹窗 -->
		<model v-if='show1' @colseModel='show1 = false'>
			<view
				style="display: flex;width: 100%;color:blue;font-size: 40rpx;justify-content: center;margin-bottom: 30rpx;">
				修改校区
			</view>
			<view style="display: flex;margin-bottom: 30rpx;">输入新的校区名字</view>
			<uni-easyinput type="text" v-model="shu8" />

			<view style="display: flex;margin-bottom: 30rpx;">选择管理老师名字</view>
			<picker @change="jiaowulaoshixuanze" :range="jiaowulaoshi">
				<uni-easyinput type="text" v-model="shu4" disabled placeholder="请选择教务老师" suffixIcon="bottom" />
			</picker>
			<!-- <uni-easyinput type="text" v-model="shu4" /> -->
			<view style="display: flex;margin-bottom: 30rpx;">选择老师电话</view>
			<uni-easyinput type="text" v-model="shu5" disabled />
			<view style="display: flex;width: 90%;justify-content: space-around;margin: 30rpx auto;color:white;">
			</view>
			<view style="display: flex;width: 80%;justify-content: space-around;margin: 30rpx auto;color: white;">
				<view style="display: flex;background-color: blue;border-radius: 15rpx;padding: 20rpx 60rpx;"
					@click="show1 = false,addBi=1">取消</view>
				<view style="display: flex;background-color: blue;border-radius: 15rpx;padding: 20rpx 60rpx;"
					@click="xiugaixiaoqu">确定</view>
			</view>
			<view v-if="meiyi_userinfo.permission.indexOf('del_xiaoqu')!=-1" @click="shanchu"
				style="display: flex;width: 100%;justify-content: center;margin-top: 40rpx;">
				删除本校区！！
			</view>
		</model>
	</view>
</template>

<script>
	import getDateTime from '@/common/getdateTime.js';
	import model from '../../components/model.vue'
	export default {
		components: {
			model
		},
		data() {
			return {
				addBi: 1,
				// lin:[],//临时值
				classroom: [],
				soukey: '', //搜索框 关键词
				kechenglist: {},
				xiaoqu: [], //去重后的校区
				jiaowulaoshi: [],
				meiyi_userinfo: [], //判断登陆人信息
				imageStyles: {
					width: 100,
					height: 100,
					border: {
						color: "blue",
						width: 2,
						style: 'dashed',
						radius: '12px'
					}
				},
				current: 0, //UTAB的标签数字
				shu: '',
				shu2: '请输入校区或老师名称', //搜索框中显示的内容
				shu3: '', //添加教室和课程时，承载校区名称
				shu4: '', //校区的管理老师,添加老师电话承载
				shu5: '', //老师的电话
				shu7: [], //老师信息数组 名字+电话
				shu7name: [], //老师信息数组 名字
				shu7tel: [], //老师信息数组 电话
				shu8: '', //添加校区和教室和课程时临时传值
				shu15: '', //任课老师的ID
				shu15id: [],
				shu16:"", //添加教室时教务老师的ID
				shu16id: [],
				// biaoqian1:true,
				biaoqian2: false,
				biaoqian3: false,
				renkelaoshi: '', //添加课程时的老师
				show: false, //输入校区名字
				show1: false, //输入新校区名字
				show3: false, //输入新教室名字，新添加时用
				show4: false, //输入新教室名字，更改时用
				show5: false, //输入新课程名字，新添加时用
				show6: false, //输入新课程字名，更改时用
				show7: false, //输入新老师名字，新添加时用
				show8: false, //输入新老师字名，更改时用
				tou10: true,
				tou20: false,
				tou30: false,
			}
		},
		async onLoad() {
			this.meiyi_userinfo = await uniCloud.getCurrentUserInfo()
			let meiyi_name_tel =await uni.getStorageSync('meiyi_name_tel')
			this.jingshouren = meiyi_name_tel.name + meiyi_name_tel.mobile
			this.jiaowulaoshifun() //获取教务老师的数据
			this.xiaoqufun()
		},

		methods: {
			// 获取我管理校区的课程
			// kechengfun() {
			// 	uni.showLoading({
			// 		title: '课程信息获取…',
			// 		mask: true
			// 	});
			// 	uniCloud.callFunction({
			// 		name: "funshare",
			// 		data: {
			// 			leixing: 27, //获取我管理校区的课程
			// 			xiaoqu: this.shu1,
			// 			key: this.soukey
			// 		}
			// 	}).then(res => {
			// 		this.kechenglist = res.result.data
			// 		uni.hideLoading()
			// 	})
			// },
			// 获取我管理的校区
			async xiaoqufun() {
				uniCloud.callFunction({
					name:"funshare",
					data:{
						leixing:1,//类型为1时，获取我管理的校区
						guanlilaoshiid:this.meiyi_userinfo.permission.indexOf("get_allxiaoqu")!=-1?'':this.meiyi_userinfo.uid,
					}
				}).then(res=>{	
					uni.setStorageSync('aoyashengxiaoqu',res)
					this.xiaoqu1 = res.result.data
					this.xiaoqu = []
					let arr = []
					for (var i = 0; i < res.result.data.length; i++) {
						var cou = 0
						for (var j = i + 1; j < res.result.data.length; j++) {
							if (res.result.data[i].name == res.result.data[j].name) {
								cou = 9
								break
							}
						}
						if (cou == 0) {
							this.xiaoqu.push(res.result.data[i])
							arr.push(res.result.data[i].name)
						}
					}
					this.wodexiaoqu = arr
					if (this.xiaoqu.length > 1) {
						this.xiaoqu.unshift({
							name: '全部'
						})
					}
					this.shu1 = this.wodexiaoqu
				})
			},
			
			//进入课程学生信息
			// async xuesheng(e) {
			// 	await uni.setStorageSync('aoyashengkecheng1', e)
			// 	uni.navigateTo({
			// 		url: '/pages/kechenghexiao/kechenghexiao'
			// 	});
			// },
			//调取某个校区的教室
			// jiaoshilistfun() {
			// 	uni.showLoading({
			// 		title: '教室信息获取…',
			// 		mask: true
			// 	});
			// 	uniCloud.callFunction({
			// 		name: "funshare",
			// 		data: {
			// 			leixing: 23, //类型为7时，某个校区的教室
			// 			weizhi: this.shu1,
			// 			key: this.soukey
			// 		}
			// 	}).then(res => {
			// 		this.jiaoshilist = res.result.data
			// 		uni.hideLoading()
			// 	})
			// },
			// 教务老师的数据库调取
			jiaowulaoshifun() {
				uniCloud.callFunction({
					name: "funshare",
					data: {
						leixing: 10, //
						role: 'jiaowulaoshi'
					}
				}).then(res => {
					res.result.data.map(item => {
						this.jiaowulaoshi.push(item.name + item.mobile)
						this.shu16id.push(item._id)
					})
				})
			},
			// 图片上传成功
			fanhuiurl(e) {
				this.zhaopian = e.tempFiles[0].fileID
			},
			// // 最上方校区管理
			// tou11(){
			// 	this.shu2='请输入校区名称进行搜索'
			// 	this.soukey=''
			// 	this.shu3=''
			// 	this.biaoqian1=true
			// 	this.biaoqian2=false
			// 	this.biaoqian3=false
			// 	this.tou10=true
			// 	this.tou20=false
			// 	this.tou30=false
			// },
			// // 最上方教室管理
			// tou22(){
			// 	this.shu2='请输入教室名称进行搜索'
			// 	this.soukey=''
			// 	this.biaoqian1=false
			// 	this.biaoqian2=true
			// 	this.biaoqian3=false
			// 	this.tou10=false
			// 	this.tou20=true
			// 	this.tou30=false
			// 	this.jiaoshilistfun()
			// },
			// 最上方课程管理
			// tou33(){
			// 	this.shu2='请输入课程名称进行搜索'
			// 	this.soukey=''
			// 	this.biaoqian1=false
			// 	this.biaoqian2=false
			// 	this.biaoqian3=true
			// 	this.tou10=false
			// 	this.tou20=false
			// 	this.tou30=true
			// 	this.kechengfun()
			// },
			//选择教务老师
			jiaowulaoshixuanze: function(e) {
				this.shu4 = this.jiaowulaoshi[e.detail.value].substring(0, this.jiaowulaoshi[e.detail.value].length -
					11)
				this.shu5 = this.jiaowulaoshi[e.detail.value].substring(this.jiaowulaoshi[e.detail.value].length - 11,
					this.jiaowulaoshi[e.detail.value].length)
				this.shu16 =this.shu16id[e.detail.value]
				console.log('6',this.shu16);
			},
			
			//下面是更新校区时弹窗
			xiugaixiaoqu_show(e) {
				if (this.meiyi_userinfo.permission.indexOf("update_xiaoqu") == -1) {
					uni.showToast({
						title: '请联系管理员给添加管理的校区后再次尝试！',
						icon: 'none',
						duration: 2000
					})
					return
				} else {
					this.addBi = 0
					this.xiaoquinfo = e
					this.shu = e._id
					this.show1 = true
					this.shu8 = e.name
					this.shu4 = e.guanlilaoshi
					this.shu5 = e.guanlilaoshidianhua
					this.shu16 = e.guanlilaoshiid
				}
			},
			// 下面是填加校区/教室/课程时显示的弹窗
			xianshi() {
				if (this.meiyi_userinfo.permission.indexOf('add_xiaoqu') == -1) {
					uni.showToast({
						title: '无添加校区权限，请联系管理员！',
						icon: 'none',
						duration: 2000
					})
					return
				} else {
					this.shu = this.shu8 = this.shu4 = this.shu5 = ''
					this.show = true
				}
			},
			// 下面修改校区
			xiugaixiaoqu() {
				uni.showLoading({
					title: '校区修改中……',
					mask: true
				});
				if (!this.shu8 || !this.shu4 || !this.shu5) {
					uni.showToast({
						title: '请输入校区名称！',
						icon: 'none',
						duration: 1000
					})
					uni.hideLoading()
					return
				}
				uniCloud.callFunction({
					name: "weifun",
					data: {
						leixing: 2, //修改校区
						name: this.shu8,
						guanlilaoshi: this.shu4,
						guanlilaoshidianhua: this.shu5,
						guanlilaoshiid: this.shu16,
						id: this.shu,
						detail: '修改校区数据，校区名字：【' + this.xiaoquinfo.name + '】→【' + this.shu8 + '】，管理老师：【' + this
							.xiaoquinfo.guanlilaoshi + this.xiaoquinfo.guanlilaoshidianhua + '】→【' + this.shu4 +
							this.shu5 + '】',
						riqi: getDateTime.dateTimeStr('y-m-d h:i:s'),
						jingshouren: this.jingshouren
					}
				}).then(res => {
					this.shu = this.shu8 = this.shu4 = this.shu5 = ''
					this.addBi = 1
					this.show1 = false
					uni.hideLoading()
					this.xiaoqufun()
				})
			},
			// 下面是增加操作
			addxiaoqu() {
				uni.showLoading({
					title: '添加校区中……',
					mask: true
				});
				if (!this.shu8 || !this.shu4 || !this.shu5) {
					uni.showToast({
						title: '请填写各项后继续操作！',
						icon: 'none',
						duration: 1000
					})
					uni.hideLoading()
					return
				}
				uniCloud.callFunction({
					name: "weifun",
					data: {
						leixing: 1, //添加校区
						name: this.shu8,
						guanlilaoshi: this.shu4,
						guanlilaoshidianhua: this.shu5,
						guanlilaoshiid: this.shu16,
						detail: '添加校区，校区名称：【' + this.shu8 + '】，管理老师：【' + this.shu4 + this.shu5 + '】',
						riqi: getDateTime.dateTimeStr('y-m-d h:i:s'),
						jingshouren: this.jingshouren
					}
				}).then(res => {
					this.shu = this.shu8 = this.shu4 = this.shu5 = ''
					this.show = false
					uni.hideLoading()
					this.xiaoqufun()
				})
			},
			// 下面是删除操作
			shanchu() {
				uni.showModal({
					title: '重要提示',
					content: '再次确认，一定要删除吗？再次确认，一定要删除吗？再次确认，一定要删除吗？再次确认，一定要删除吗？再次确认，一定要删除吗？再次确认，一定要删除吗？',
					showCancel: true,
					cancelText: '取消',
					confirmText: '确定',
					success: res => {
						if (res.confirm) {
							uni.showLoading({
								title: '删除中……',
								mask: true
							});
							uniCloud.callFunction({
								name: "weifun",
								data: {
									leixing: 3, //添加校区
									id: this.shu,
									detail: '删除校区，校区名称：【' + this.xiaoquinfo.name + '】，管理老师：【' + this
										.xiaoquinfo.guanlilaoshi + this.xiaoquinfo
										.guanlilaoshidianhua + '】',
									riqi: getDateTime.dateTimeStr('y-m-d h:i:s'),
									jingshouren: this.jingshouren
								}
							}).then(res => {
								this.shu = this.shu8 = this.shu4 = this.shu5 = ''
								this.addBi = 1
								this.show1 = false
								uni.hideLoading()
								this.xiaoqufun()
							})
						}

					},
					fail: () => {},
					complete: () => {}
				});

			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f8f8f8;

		.xuanzhong {
			display: flex;
			width: 150rpx;
			padding: 9rpx 25rpx;
			justify-content: center;
			align-items: center;
			background-color: blue;
			border-radius: 15rpx;
			color: white;
		}

		.weixuanzhong {
			display: flex;
			width: 150rpx;
			padding: 9rpx 25rpx;
			justify-content: center;
			align-items: center;
			border-color: blue;
			border-width: 4rpx;
			border-style: solid;
			border-radius: 15rpx;
			color: blue;
		}
	}
</style>